import 'package:flutter/material.dart';
import 'package:flutter_edu_online/constants.dart';
import 'package:flutter_edu_online/model/category.dart';
import 'package:flutter_edu_online/page/detail/detail_page.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:animations/animations.dart';

import 'components/app_bar.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: buildAppBarA(),
      backgroundColor: Colors.white,
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              leading: IconButton(
                icon: SvgPicture.asset("assets/icons/menu.svg"),
                onPressed: () {},
              ),
              actions: [
                IconButton(
                  icon: ClipOval(
                    child: Image.asset(
                      "assets/images/avatar.jpg",
                      width: 40,
                      height: 40,
                    ),
                  ),
                  onPressed: () {},
                ),
              ],
              elevation: 0,
              backgroundColor: Colors.white,
              expandedHeight: 210,
              // //值为true时 标题会停留
              pinned: true,
              floating: true,
              // title: buildCateNav(),
              flexibleSpace: FlexibleSpaceBar(
                background: Padding(
                  padding: EdgeInsets.only(left: 20, right: 20, top: 70),
                  child: buildTitle(),
                ),
              ),
              bottom: PreferredSize(
                preferredSize: Size(MediaQuery.of(context).size.width, 100),
                child: Padding(
                  padding: EdgeInsets.only(
                    left: 20,
                    right: 20,
                    top: 5,
                    bottom: 5,
                  ),
                  child: Column(
                    children: [
                      buildSearch(),
                      SizedBox(height: 5),
                      buildCateNav(),
                    ],
                  ),
                ),
              ),
            ),
          ];
        },
        body: Padding(
          padding: EdgeInsets.only(left: 20, right: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 10),
              buildCourseList(),
            ],
          ),
        ),
      ),
      // body: Padding(
      //   padding: EdgeInsets.only(left: 20, right: 20, top: 50),
      //   child: Column(
      //     crossAxisAlignment: CrossAxisAlignment.start,
      //     children: [
      //       // 第二种实现顶部导航的方式
      //       buildAppBarB(),
      //       SizedBox(height: 10),
      //       buildTitle(),
      //       buildSearch(),
      //       buildCateNav(),
      //       SizedBox(height: 10),
      //       buildCourseList(),
      //     ],
      //   ),
      // ),
    );
  }

  Column buildTitle() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 10),
        Text("Hey GGB！", style: kHeadingextStyle),
        Text(
          "Find a course you want to learn!",
          style: kSubheadingextStyle.copyWith(
            height: 1.5,
            fontSize: 15,
          ),
        ),
      ],
    );
  }

  Widget buildCourseList() {
    return Expanded(
      child: StaggeredGridView.countBuilder(
          physics: BouncingScrollPhysics(),
          padding: EdgeInsets.all(0),
          itemCount: categories.length,
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          itemBuilder: (context, index) {
            return OpenContainer(
              closedElevation: 0,
              openElevation: 0,
              openColor: Colors.transparent,
              closedColor: Colors.transparent,
              transitionDuration: Duration(milliseconds: 800),
              closedBuilder: (context, action) => buildCourseCard(index),
              openBuilder: (context, action) => DetailPage(),
            );
            // return buildCourseCard(index);
          },
          staggeredTileBuilder: (index) => StaggeredTile.fit(1)),
    );
  }

  Widget buildCourseCard(int index) {
    return Container(
      height: index.isEven ? 200 : 240,
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        image: DecorationImage(
          image: AssetImage(categories[index].image),
          fit: BoxFit.fill,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(categories[index].name, style: kTitleTextStyle),
          SizedBox(height: 5),
          Text(
            "${categories[index].numOfCourses}",
            style: TextStyle(
              color: kTextColor.withOpacity(0.5),
            ),
          )
        ],
      ),
    );
  }

  Row buildCateNav() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Category",
            style: kTitleTextStyle.copyWith(
              fontSize: 18,
            )),
        InkWell(
          onTap: () {},
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 8,
              vertical: 5,
            ),
            child: Text("See All",
                style: kSubtitleTextSyule.copyWith(
                  color: kBlueColor,
                  fontSize: 15,
                )),
          ),
        ),
      ],
    );
  }

  Widget buildSearch() {
    return Container(
      width: double.infinity,
      height: 50,
      // TODO 使用第一种方式的时候，放开  使用折叠顶部的时候注释
      // margin: EdgeInsets.symmetric(vertical: 10),
      child: Material(
        color: Color(0xFFF5F5F7),
        borderRadius: BorderRadius.circular(40),
        child: InkWell(
          borderRadius: BorderRadius.circular(40),
          onTap: () {},
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
            child: Row(
              children: [
                SvgPicture.asset("assets/icons/search.svg"),
                SizedBox(width: 16),
                Text(
                  "Search for anything",
                  style: TextStyle(
                    fontSize: 15,
                    color: Color(0xffa0a5bd),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
